@layout("/template/container.html",{js:["/js/module/admin/login.js" ,"/js/common/captcha.js","/js/common/md5.js"]}){

<div style="margin: 10% auto;width: 400px; background-color: #FFF;padding: 30px 10px 10px">
    <div style="font-size: 20px;">
        <i class="layui-icon layui-icon-fire" style="color: red"></i><b> 登录 - MANAGER USER</b>
    </div>
    <br>
    <br>
    <form class="layui-form layui-form-pane" action="${contextPath}/admin/login" method="post">
        <div class="layui-form-item">
            <input id="username" name="username" type="text" lay-verify="required|username"
                   class="layui-input   layui-btn-fluid" placeholder="用户名" value="admin"/>
        </div>
        <div class="layui-form-item">
            <input id="password" name="password" type="password" lay-verify="required|password"
                   class="layui-input   layui-btn-fluid" placeholder="密码" value="zcg2018"/>
        </div>
        <div class="layui-form-item hide" id="captcha-image-container">
            <div style="float: left;width: 65%">
                <input type="text" name="code" id="captcha-image" placeholder="请输入验证码" autocomplete="off"
                       class="layui-input">
            </div>
            <div style="float: right;width: 30%;" id="captcha-image-show-container" data-width="120" data-height="38">
                <img alt="captcha" title='点击切换' style="width:120px;height:38px;">
            </div>
        </div>
        <div class="layui-form-item hide" id="captcha-jigsaw-container">
            <div id="captcha-jigsaw-show-container" data-width="400" data-height="200">
                <div style="width: 400px;height: 250px;">
                    <div style="height: 200px; border: 1px solid #ccc;position: relative">
                        <img src="${contextPath}/images/common/bg/bg1.png" width="100%" height="100%">
                        <div style="width: 50px; height: 50px;position: absolute;top: 20px;border: 1px solid #ccc">
                            <img src="${contextPath}/images/jigsaw/slidingBlock/1.png" width="100%" height="100%">
                        </div>
                    </div>
                    <div style="margin-top: 15px;width: 400px;height: 20px;position: relative;border-radius: 20px;
                    background-color: #c3c3c3;text-align: center;color:white;">
                        <div style="position: absolute;left: 0;top: -12px;border: 1px solid #d0e9c6;width: 40px;height: 40px;
                        border-radius: 40px;background-color: #00F7DE"></div>
                        滑动图片完成校验
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn  layui-btn-fluid" lay-filter="login" lay-submit>登录</button>
        </div>
    </form>
    <input type="hidden" value="${msg!''}" id="msg">
</div>
@}